<template>
  <v-container grid-list-md>
    <v-layout row wrap>
      <v-flex xs12 md8>
        <transition name="fade">
          <router-view></router-view>
        </transition>
      </v-flex>
      <v-flex md4 class="hidden-sm-and-down">
        <v-card class="mb-3">
          <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" height="200px"></v-img>
          <v-card-title primary-title>
            <div>
              <div class="headline">
                <v-icon>account_circle</v-icon>&nbsp;&nbsp;IMWNK
              </div>
              <span class="grey--text">To be a php artisan.</span>
            </div>
          </v-card-title>
          <v-slide-y-transition>
            <v-card-text>耐心。耐心并非技术技巧，但却能让程序员走的更远。写代码不容易，越是有耐心的程序员，越有可能获得成功。</v-card-text>
          </v-slide-y-transition>
        </v-card>
        <v-widget title="热门文章" contentBg="white" class="mb-3">
          <div slot="widget-content">
            <v-list dense>
              <template v-for="item in items">
                <v-list-tile :key="item.id">
                  <v-list-tile-content>
                    <v-list-tile-title>
                      <v-icon small>far fa-hand-point-right</v-icon>
                      &nbsp;&nbsp;{{ item.title}}
                    </v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </template>
            </v-list>
          </div>
        </v-widget>
        <v-widget title="标签云" contentBg="white" class="mb-3">
          <div slot="widget-content">
            <v-btn
              v-for="tag in tags"
              :key="tag.name"
              small
              :color="tag.color"
              :to="{ name:'tag',params:{id:tag.id}}"
            >{{ tag.name }}</v-btn>
          </div>
        </v-widget>
        <v-widget title="友情链接" contentBg="white" class="mb-3">
          <div slot="widget-content">
            <v-btn
              v-for="link in links"
              :key="link.id"
              :href="link.link"
              depressed
              small
            >{{ link.name }}</v-btn>
          </div>
        </v-widget>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
import request from '@/utils/request'
import VWidget from '@/components/VWidget'
export default {
  components: { VWidget },
  data: () => ({
    items: [],
    tags: [],
    links: []
  }),
  methods: {},
  created() {
    let _this = this
    request.get('/posts').then(res => {
      _this.items = res.data.posts
    })
    request.get('/tags').then(res => {
      _this.tags = res.data.tags
    })
    request.get('/links').then(res => {
      _this.links = res.data.links
    })
  }
}
</script>



